<template>
	<div class="wrapper-container">
		<el-tabs v-model="activeName">
			<el-tab-pane label="基础信息" name="first">
				<basic-info :dataForm="dataForm"></basic-info>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" class="top70">
			<el-tab-pane label="入学/毕业信息" name="first">
				<ruxue-info :dataForm="dataForm"></ruxue-info>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" class="top70">
			<el-tab-pane label="家庭成员情况" name="first" class="table-container">
				<div class="table-css">
					<el-table :data="dataForm.xyFamilyInfo" 
						:header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" 
						border style="width: 100%" class="table-data">
						<el-table-column prop="mname" label="姓名" align="center"></el-table-column>
						<el-table-column prop="relationShow" label="和本人关系" align="center"></el-table-column>
						<el-table-column prop="idCard" label="身份证号" width="300px" align="center"></el-table-column>
						<el-table-column prop="workunit" label="工作单位" width="400px" align="center"></el-table-column>
						<el-table-column prop="post" label="职务" align="center"></el-table-column>
						<el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-tabs v-model="activeName" class="top70">
			<el-tab-pane label="异动情况" name="first" class="table-container">
				<div class="table-css">
					<el-table :data="dataForm.xyChangeInfo" border style="width: 100%" 
					:header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" class="table-data">
						<el-table-column prop="changeTypeShow" label="异动类型" align="center"></el-table-column>
						<el-table-column prop="changedate" label="异动时间" align="center"></el-table-column>
						<el-table-column prop="reason" label="原因" align="center"></el-table-column>
						<el-table-column prop="originalStudentDui" label="原学员队" align="center"></el-table-column>
						<el-table-column prop="originalSpecialty" label="原专业" align="center"></el-table-column>
						<el-table-column prop="originalSpecialtyClassName" label="原专业班次" align="center"></el-table-column>
						<el-table-column prop="changeApproveNum" label="异动批准文号" align="center"></el-table-column>
						<el-table-column prop="changeTime" label="批准日期" align="center"></el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
		</el-tabs>
		<div class="button-group">
			<!-- auditStatus:2、3可修改 0、1可提交-->
			<div class="" @click="addInfo" v-if="dataForm.auditStatus == 2 || dataForm.auditStatus == 3" >修改</div>
			<div class="disabled" v-if="dataForm.auditStatus == 1 || dataForm.auditStatus == 0" >修改</div>
			<div class="" v-if="dataForm.auditStatus == 2 || dataForm.auditStatus == 3" @click="changeAuditStatus">提交</div>
			<div class="disabled" v-if="dataForm.auditStatus == 1 || dataForm.auditStatus == 0">提交</div>
            <div class="" @click="cancel">取消</div>
		</div>
	</div>
</template>

<script>
import basicInfo from './infoSearchComment/basic.vue'
import ruxueInfo from './infoSearchComment/ruxue.vue'
import {getStudentInfo,studentStatusAudit} from "@/api/student";

  export default {
		data(){
		  return {
            activeName:'first',
			dataForm:{}
          }
		},
		components: {
			basicInfo,
            ruxueInfo
		},
		mounted(){
			this.getInfo()
		},
        methods: {
			async getInfo(){
				let params = {studentCode:this.$route.query.studentCode}
				let res = await getStudentInfo(params);
				this.dataForm = res
			},
            addInfo(){
                this.$router.push({
                    path:'/student/studentStatus/addInfo',
					query:{
						studentCode:this.$route.query.studentCode
					}
                })
            },
			cancel(){
				this.$router.back(-1)
			},
			async changeAuditStatus(){
				console.log(this.dataForm)
				let arr = [];
				arr.push(this.dataForm.studentCode)
				//0:待审核，1.通过(免审核),2.未提交,3.下发核对=打回=不通过=3
				let params = {
					dataIdList:arr,
					state:0,
				}
				let res =  await studentStatusAudit(params)
					if(res.code == 200){
					this.$message.success('下发成功！');
					this.getInfo();
				}
			}
        }
  };
</script>
<style lang="less" scoped>
	.table-css {
		/deep/.el-table td,
		.el-table th.is-leaf,
		.el-table--border,
		.el-table--group {
			border-color: #c7d7eb;
		}

		/deep/.el-table__header tr,
		.el-table__header th {
			padding: 0;
			height: 76px;
			background-color: #edf2f9;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			line-height: 20px;
			color: #004ca7;
		}

		/deep/.el-table__body tr,
		.el-table__body td {
			padding: 0;
			height: 86px;
		}
	}
	
</style>
<style lang="less" scoped>
@import "../../../styles/commonCss.less";

	/deep/.my-form-container{width:100%}
	.top70{margin-top: 70px;}
	.button-group {
		margin-top: 68px;
		padding-bottom: 132px;
		text-align: center;
		> div {
			display: inline-block;
			font-size: 16px;
			padding: 6px 22px;
			border-radius: 6px;
			cursor: pointer;
			&:nth-child(1) {
				color: #F3B815;
				border: 1px solid #F3B815;
				background: #FFF6EF;
				margin-right: 139px;
			}
			&:nth-child(2) {
				color: #02C86C;
				border: 1px solid #02C86C;
				background: #F1FFF8;
				margin-right: 139px;
			}
			&:nth-child(3) {
				color:#FF3819;
				background: #FFEFEF;
				border: 1px solid #FF3819;
			}
		}
	}
	.wrapper-container {
		margin: 47px auto 0;
		height: 785px;
	}
	/deep/.el-tabs__nav{
		background: rgba(77,129,192,0.1);
		padding: 0 28px;
		border-radius: 6px 6px 0px 0px;
		
	}
	/deep/.el-tabs__item{
		line-height: 38px;
		color:#054CA7 ;
		font-weight: bold;
	}
	/deep/.el-tabs__active-bar{
		height:0px
	}
	/deep/.el-tabs__nav-wrap::after {
		background-color:#004CA7 ;
		height: 1px;
	}
	.disabled{
		background: #F5F5F5!important;
		border: 1px solid #818180!important;
		color: #A8A8A6!important;
	}
</style>